<!--
 * @Description: 收货查询
 * @Author: wangwangwang
 * @Date: 2020-09-21 14:09:06
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-29 14:31:59
-->
<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <div class="header_right" @click="showCardNav = !showCardNav">
          <div class="title">搜索</div>
          <div>
            <div :class="{ 'arrowTransform': !showCardNav, 'arrowTransformReturn': showCardNav}">
              <i style="margin-right: 5px" class="el-icon-arrow-down"></i>
            </div>
          </div>
        </div>
        <div v-show="showCardNav" class="hr"></div>
        <el-collapse-transition>
          <div v-show="showCardNav">
            <div class="search">
              <span style="display: inline-block;margin-bottom: 10px;">
                <span style="margin-right: 12px;">收货站点</span>
                <el-select v-model="tableParam.receiveStationId" style="width: 220px;" placeholder="请选择">
                  <el-option v-for="item in stationList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </span>
              <span style="margin-left: 24px;">
                <span style="margin-right: 12px;">物料名称</span>
                <el-select v-model="tableParam.rawNameId" style="width: 220px;" placeholder="请选择">
                  <el-option v-for="item in rawList" :key="item.id" :label="item.itemName" :value="item.id"></el-option>
                </el-select>
              </span>
              <span style="margin-left: 24px;">
                <span style="margin-right: 12px;">状态</span>
                <el-select v-model="tableParam.receiveStatuss" style="width: 220px;" multiple placeholder="请选择">
                  <el-option v-for="item in statuslist" :key="item.id" :label="item.itemName" :value="item.id"></el-option>
                </el-select>
              </span>
              <span style="margin-left: 24px;">
                <span style="margin-right: 12px;">二次过磅时间</span>
                <el-date-picker v-model="tableParam.time" unlink-panels value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" :default-time="['06:00:00','06:00:00']" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </span>
              <el-button icon="el-icon-search" size="medium" class="bottom_all but1" @click="searchSubmit()">查 询</el-button>
              <el-button size="medium" class="bottom_all_two" style="margin-left:12px;" @click="init()">重 置</el-button>
              <el-button size="medium" class="bottom_all_two" style="margin-left: 12px" @click="tableParamType = true">高级搜索</el-button>
            </div>
          </div>
        </el-collapse-transition>
        <div class="hr"></div>
        <div class="card">
          <div class="card_nav">
            <div></div>
            <div>
              <el-dropdown :hide-on-click="false" trigger="click" style="margin: 0 20px;">
                <el-link :underline="false">
                  <span class="el-icon--left">
                    <i class="iconfont iconicon_button_filtrate"></i>
                  </span>
                  筛选
                </el-link>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="(item, index) in table" :key="index">
                    <el-checkbox v-model="item.status">{{ item.label }}</el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-link :underline="false" @click="load()">
                <span class="el-icon--left">
                  <i class="iconfont iconicon_button_export1"></i>
                </span>
                导出
              </el-link>
            </div>
          </div>
          <div v-loading="tableLoading" class="card_info" :style="style">
            <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
              <template v-for="(item, index2) in table">
                <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :min-width="item.width" :fixed="item.label == '异常处理'||item.label == '检测结果'||item.label == '操作'?'right':false">
                  <template slot-scope="scope">
                    <span v-if="item.label == '状态'" style="color:#969799;">{{ statuslist | fromatTable(scope.row.receiveStatus,'itemName','id')}}</span>
                    <span v-else-if="item.label == '交货量照片'">
                      <el-button v-if="scope.row.imgs" class="bottom_one" size="mini" @click="show1(scope.row.imgs,'交货量照片')">查看</el-button>
                    </span>
                    <span v-else-if="item.label == '材质书'">
                      <el-button v-if="scope.row.materialBookUrl" size="mini" class="bottom_one" @click="show1(scope.row.materialBookUrl,'材质书照片')">查看</el-button>
                    </span>
                    <span v-else-if="item.label == '附件'">
                      <el-button v-if="scope.row.accessoryUrl" size="mini" class="bottom_one" @click="show1(scope.row.accessoryUrl,'附件照片')">查看</el-button>
                    </span>
                    <span v-else-if="item.prop == 'approvalStatus'">
                      <span v-if="scope.row.approvalStatus==1">审批中</span>
                      <span v-else-if="scope.row.approvalStatus==2">已通过</span>
                      <span v-else-if="scope.row.approvalStatus==3">不通过</span>
                      <span v-else-if="scope.row.approvalStatus==4">已撤销</span>
                    </span>
                    <span v-else-if="item.prop == 'receiveStationSite'">
                      <span>{{scope.row.receiveStationSite || scope.row.receiveStation}}</span>
                    </span>
                    <span v-else-if="item.label == '操作'">
                      <el-dropdown :hide-on-click="false" trigger="click">
                        <el-button size="mini" class="bottom_one">更多</el-button>
                        <el-dropdown-menu slot="dropdown" style="text-align: left">
                          <el-dropdown-item v-if="ButtonList.findIndex(res=>(res.buttonValue=='CKYCCL'))!==-1">
                            <el-button size="mini" style="margin:5px 0" class="bottom_one" @click="gettestresult(scope.row)">查看异常处理</el-button>
                          </el-dropdown-item>
                          <el-dropdown-item v-if="ButtonList.findIndex(res=>(res.buttonValue=='CHAKANJG'))!==-1">
                            <el-button size="mini" style="margin:5px 0" class="bottom_one" @click="open(scope.row,'Dialog1')">查看结果</el-button>
                          </el-dropdown-item>
                          <el-dropdown-item>
                            <el-button size="mini" style="margin:5px 0" class="bottom_one" @click="open(scope.row,'Dialog2')">检测</el-button>
                          </el-dropdown-item>
                          <el-dropdown-item v-if="scope.row.approvalStatus!==1&&scope.row.approvalStatus!==2">
                            <el-button size="mini" style="margin:5px 0" class="bottom_one" @click="handleCancel(scope.row)">退货</el-button>
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </span>
                    <span v-else>{{ scope.row[item.prop] }}</span>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
        </div>
      </el-main>
      <div class="card_bottom">
        <div class="card_bottom_left">
          <div class="top_page_totle">总共{{ total }}条</div>
          <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" :page-sizes="[10, 20, 30, 40,50,100,200,500,1000]" layout="prev,pager,sizes,next,jumper" :total="total" @size-change="sizeChange" @current-change="gettableData()"></el-pagination>
        </div>
        <div>
          <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="gettableData">刷新</el-button>
        </div>
      </div>
    </el-container>
    <!-- 异常处理 -->
    <el-dialog v-dialogDrag :visible.sync="dialoglist.indexOf(activedialog)==0" width="680px" :close-on-click-modal="false" :before-close="resetdialog">
      <span slot="title" class="dialog-title">异常处理</span>
      <div class="dialoginfo">
        <div class="textline">
          <div class="left">异常现象：</div>
          <div class="right">{{results.phenomena}}</div>
        </div>
        <div class="textline">
          <div>原因：</div>
          <div>{{results.cause}}</div>
        </div>
        <div class="textline">
          <div>拟处理方式：</div>
          <div>{{results.processMode}}</div>
        </div>
        <div class="textline">
          <div>条件接收方式：</div>
          <div>{{results.acceptableConditings}}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="resetdialog">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 检测结果 -->
    <el-dialog v-dialogDrag :visible.sync="dialoglist.indexOf(activedialog)==1" width="1080px" :close-on-click-modal="false" :before-close="resetdialog">
      <span slot="title" class="dialog-title">检测结果</span>
      <div class="dialoginfo">
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="arr1" tooltip-effect="dark">
          <el-table-column label="检验ID" align="center">
            <template slot-scope="scope">{{scope.$index+1}}</template>
          </el-table-column>
          <el-table-column label="站点" align="center" prop="station"></el-table-column>
          <el-table-column label="检验类型" align="center" prop="dataType"></el-table-column>
          <el-table-column label="供应商名称" align="center" prop="supplierName"></el-table-column>
          <el-table-column label="物料名称" align="center" prop="rawName"></el-table-column>
          <el-table-column label="规格" align="center" prop="specification"></el-table-column>
          <el-table-column label="交货车辆" align="center" prop="carNo"></el-table-column>
          <el-table-column label="检验结果" align="center">
            <template slot-scope="scope">
              <span class="table_link" @click="open1(scope.row)">查看</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="resetdialog">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 检测-->
    <el-dialog v-dialogDrag :visible.sync="dialoglist.indexOf(activedialog)==2" width="680px" :close-on-click-modal="false" :before-close="resetdialog">
      <span slot="title" class="dialog-title">检测</span>
      <div class="dialoginfo">
        <el-form ref="reffrom1" :inline="true" :rules="rules1" :model="from1" label-width="110px">
          <el-form-item prop="id">
            <span slot="label">检验类别</span>
            <el-select v-model="from1.id" placeholder="请选择">
              <el-option v-for="(item, index) in arr2" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="resetdialog">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px;" @click="submit1()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 检验结果1 -->
    <el-dialog v-dialogDrag :visible.sync="dialog3" width="680px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">查看</span>
      <div \style="padding:0 20px">
        <div class="dialoginfo-title">
          <div>
            <span>供应商：</span>
            <span>{{ childlow.supplierName }}</span>
          </div>
          <div>
            <span>原物料：</span>
            <span>{{ childlow.rawName }}</span>
          </div>
          <div>
            <span>车牌号：</span>
            <span>{{ childlow.carNo }}</span>
          </div>
        </div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="arr3.list" tooltip-effect="dark">
          <template v-for="(item, index2) in arr3.title">
            <el-table-column :key="index2" :label="item.name" align="center">
              <template slot-scope="scope">
                <span v-if="index2==0">{{scope.row[0].testItem}}</span>
                <span v-else>
                  <span v-if="scope.row[index2-1].type==2" class="tablt_link" @click="show(scope.row[index2-1].testValue)">查看</span>
                  <span v-if="scope.row[index2-1].type==3" class="tablt_link">>{{scope.row[index2-1].symbol}}{{scope.row[index2-1].testValue}}</span>
                  <span v-else>{{scope.row[index2-1].testValue}}</span>
                </span>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="dialog3=false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 高级搜索 -->
    <el-dialog v-dialogDrag :visible.sync="tableParamType" width="650px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">高级搜索</span>
      <div class="dialoginfo">
        <el-form ref="reftableParam" :inline="true" :model="tableParam" label-width="110px">
          <el-form-item>
            <span slot="label">供应商名称</span>
            <el-input v-model="tableParam.supplier" tplaceholder="请输入" clearable style="width:400px;"></el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">第二次过磅时间</span>
            <el-date-picker v-model="startTimDateEndTimDate" type="datetimerange" unlink-panels value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始时间" end-placeholder="结束时间" @change="tableParam.secondTimeOne=startTimDateEndTimDate[0]||'',tableParam.secondTimeTwo=startTimDateEndTimDate[1]||''"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <span slot="label">交货车辆</span>
            <el-input v-model="tableParam.deliveryVehicl" tplaceholder="请输入" clearable style="width:400px;"></el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">司机</span>
            <el-input v-model="tableParam.driver" tplaceholder="请输入" clearable style="width:400px;"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="tableParamType=false,tableParam.supplier='',startTimDateEndTimDate=[],tableParam.secondTimeOne='',tableParam.secondTimeTwo='',tableParam.deliveryVehicl='',tableParam.driver=''">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px" @click="gettableData(),tableParamType=false">搜 索</el-button>
      </span>
    </el-dialog>
    <!-- 查看图片 -->
    <ShowDetails :dialog="imgsDialog" :imgsText="imgsText" :imgList="imgList" :mp4List="mp4List" :fileList="fileList" @reset="reset"></ShowDetails>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import ShowDetails from '@/components/showdetails';
import {
  queryPage,
  Download,
  getConsignmentIssue,
  getListByPid,
  save1,
  getDetail,
} from "@/api/GHnumber/goods.js";
import { setgetList } from "@/api/basicConfig/CPYquality.js";
import { getUserAutList, getDicType } from "@/api/common.js";
export default {
  mixins: [mixin],
  components: {
    ShowDetails
  },
  data() {
    return {
      imgsDialog: false,
      imgsText: '',
      imgList: [],
      mp4List: [],
      fileList: [],
      startTimDateEndTimDate: [],
      tableParamType: false,
      /*表格增删改查及下载接口*/
      queryPage: queryPage,
      DownloadURL: Download,
      /*表格数据*/
      table: [
        { label: "收货站点", width: "140", prop: "receiveStation", status: true, },
        { label: "库存仓", width: "120", prop: "repertory", status: true },
        { label: "状态", width: "120", prop: "", status: true },
        { label: "供应商名称", width: "160", prop: "supplier", status: true },
        { label: "合同签订主体", width: "160", prop: "contractSigningSubject", status: true },
        { label: "交货车辆", width: "140", prop: "deliveryVehicl", status: true, },
        { label: "物料名称", width: "120", prop: "rawName", status: true },
        { label: "物料规格", width: "120", prop: "specification", status: true },
        { label: "货票量", width: "120", prop: "ticketNum", status: true },
        { label: "一次过磅量", width: "120", prop: "firstWeight", status: true },
        { label: "二次过磅量", width: "120", prop: "secondWeight", status: true },
        { label: "扣减量", width: "120", prop: "deductionNum", status: true },
        { label: "含水率", width: "120", prop: "moistureContent", status: true },
        { label: "收货量", width: "120", prop: "receiveNum", status: true },
        { label: "交货量照片", width: "120", prop: "", status: true },
        { label: "材质书", width: "120", prop: "", status: true },
        { label: "附件", width: "120", prop: "", status: true },
        { label: "备注", width: "120", prop: "remark", status: true },
        { label: "更改备注", width: "140", prop: "field1", status: true, },
        { label: "司机", width: "120", prop: "driver", status: true },
        { label: "实际收货时间", width: "140", prop: "actualReceiveTime", status: true, },
        { label: "一次过磅量时间", width: "140", prop: "firstTime", status: true, },
        { label: "二次过磅量时间", width: "140", prop: "secondTime", status: true, },
        { label: "收货地点", width: "180", prop: "receiveStationSite", status: true, },
        { label: "退货审批状态", width: "120", prop: "approvalStatus", status: true, },
        { label: "退货备注", width: "150", prop: "returnGoodRemark", status: true, },
        // { label: "异常处理", width: "140", prop: "", status: true },
        // { label: "异常评价", width: "400", prop: "evaluate", status: true },
        // { label: "检测结果", width: "120", prop: "", status: true },
        { label: "操作", width: "100", prop: "", status: true },
      ],
      /*表单页类型，0为无树状，1为有树状，有树状在el-main加上display:flex*/
      pagesType: 0,
      /*添加表单数据*/
      rules: {
        code: [{ required: true, message: "请输入站点编码", trigger: "blur" }],
      },
      fromDate: {
        code: "",
      },
      statuslist: [
        { itemName: "运输中", id: 1 },
        { itemName: "检验中", id: 2 },
        { itemName: "卸料中", id: 3 },
        { itemName: "内部确认中", id: 4 },
        { itemName: "外部确认中", id: 5 },
        { itemName: "已接受", id: 6 },
        { itemName: "退回", id: 7 },
      ],
      dialoglist: ["testresult", "Dialog1", "Dialog2"],
      activedialog: "",
      results: {},
      /*检测*/
      low: {},
      arr1: [],
      rules1: {
        id: [{ required: true, message: "请输入站点编码", trigger: "blur" }],
      },
      from1: {},
      arr2: [],
      /*检验结果1*/
      dialog3: false,
      arr3: [],
      childlow: {},
      stationList: [],
      rawList: [],
    };
  },
  async created() {
    /*存储拷贝的原初始化fromDate数据*/
    this.tableParam = { ...this.tableParam, rawNameId: "", receiveStationId: '', receiveStatuss: [], supplier: '', secondTimeOne: '', secondTimeTwo: '', deliveryVehicl: '', driver: '' };
    setgetList().then((res) => {
      this.arr2 = res.data.types.filter(
        (res) => res.dataType == 1 && res.id !== "3"
      );
    });
    this.gettableData();
    this.stationList = await getUserAutList(true);
    getDicType({ code: "MATname" }).then((res) => {
      if (res.code === 1001) {
        this.rawList = res.data.items;
      }
    });
  },
  /*
   *copy(data)深拷贝数据,返回拷贝完的数据
   *gettableData获取列表数据
   *load下载
   *SortNum保持序列号
   * UpdateOrDelete禁用，启用，删除
   * submitFromDate保存更新数据
   */
  methods: {
    handleCancel (data) {
      const params = {
        type: 1,
        supplier: data.supplier,
        rawName: data.rawName,
        carNo: data.deliveryVehicl,
        code: data.code,
        id: data.id,
      }
      this.$router.push({ name: "cancleOrder", query: params });
      // const self = this;
      // this.$confirm("确定对此数据进行退货?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   cancelButtonClass: "bottom_all_two",
      //   confirmButtonClass: "bottom_all",
      //   type: "warning",
      // }).then(() => {
      //   returnGoods({id: data.id}).then(res => {
      //     if (res.code === 1001) {
      //       self.$message.success('操作成功');
      //       self.gettableData();
      //     }
      //   })
      // }).catch(() => { });
    },
    searchSubmit() {
      this.tableParam.page = 1;
      if (this.tableParam.time?.length) {
        this.tableParam.secondTimeOne = this.tableParam.time[0];
        this.tableParam.secondTimeTwo = this.tableParam.time[1];
      }
      this.tableParam.receiveStatusStrs = this.tableParam.receiveStatuss.join(',');
      this.gettableData();
    },
    /**看图*/
    show1(file, text) {
      let items = file ?.split(",").map(res => ('/file/' + res))
      this.imgList = items.filter(res => (res.includes('type=img')))
      this.mp4List = items.filter(res => (res.includes('type=mp4')))
      this.fileList = items.filter(res => (res.includes('type=file')))
      this.imgsText = text
      this.imgsDialog = true
    },
    reset(key) {
      this[key] = false;
    },
    show(text) {
      this.$alert(text, {
        confirmButtonText: "确定",
        confirmButtonClass: "bottom_all",
        callback: () => { },
      });
    },
    /*打开检测和查看结果弹窗*/
    open(low, key) {
      if (key == "Dialog1") {
        this.activedialog = key;
        getListByPid({ consignmentId: low.id }).then((res) => {
          this.arr1 = res.data;
        });
      } else {
        this.activedialog = key;
        this.from1 = {};
        setTimeout(() => {
          this.$refs.reffrom1.clearValidate();
        }, 10);
      }

      this.low = low;
    },
    submit1() {
      this.$refs.reffrom1.validate((valid) => {
        if (valid) {
          let data = {
            consignmentId: this.low.id,
            dataType: this.$fromatTable(this.arr2, this.from1.id, "id", "name"),
            dataTypeId: this.from1.id,
            dataTypeStatus: 1,
          };
          save1(data).then((res) => {
            if (res.code == 1001) {
              if (!res.data) {
                this.$message({
                  message: "检验报告已经生成",
                  type: "warning",
                });
                return;
              } else {
                this.$message({
                  message: '操作成功',
                  type: 'success'
                });
                this.activedialog = "";
              }
            } else {
              this.$message({
                message: res.codeMsg,
                type: 'warning'
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    /*检验结果1*/
    open1(data) {
      this.childlow = data;
      getDetail({ pid: data.id }).then((res) => {
        this.arr3 = res.data;
        this.arr3.title.unshift({ name: "检验项目", sortNum: 0 });
        this.dialog3 = true;
      });
    },
    /*重置数据*/
    init() {
      this.tableParam = {
        rawNameId: "", 
        receiveStationId: '', 
        receiveStatuss: [], 
        supplier: '', 
        secondTimeOne: '', 
        secondTimeTwo: '', 
        deliveryVehicl: '', 
        driver: '' 
      }
      this.gettableData();
    },
    /*获取异常处理*/
    gettestresult(low) {
      getConsignmentIssue({ consignmentId: low.id }).then((res) => {
        if (res.data) {
          this.results = res.data;
        } else {
          this.results = {};
        }
        this.activedialog = "testresult";
      });
    },
    resetdialog() {
      this.activedialog = "";
    },
    sizeChange(value) {
      this.tableParam.pageSize = value;
      this.gettableData();
    },
  },
};
</script>

<style lang="scss" scoped>
.dialoginfo-title {
  display: flex;
  justify-content: space-between;
  padding: 10px 0 20px 0;
}
.textline {
  line-height: 40px;
  display: flex;
  > div:first-child {
    width: 100px;
    text-align: right;
  }
  > div:last-child {
    width: 500px;
  }
}
.table_link {
  margin-left: 10px;
  color: $bg_color;
}

.table_link:hover {
  opacity: 0.8;
}
.el-input,
.el-select {
  width: 240px;
}
</style>
